<template>
  <div>
    <el-card>
      <el-row class="mb20">
        <el-button class="mr10" type="primary" @click="showAdd" size="small">新增</el-button>
      </el-row>

      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%" height="calc(100vh - 250px)"
        :default-sort="{ prop: 'date', order: 'descending' }" v-loading="loading">
        <el-table-column prop="sourceModelName" align="center" label="源模型" sortable>
        </el-table-column>
        <el-table-column prop="destModelName" align="center" label="目标模型" sortable>
        </el-table-column>
        <el-table-column prop="modelAssociationName" align="center" label="关联类型" sortable>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button style="margin-right: 20px" size="mini" type="primary"
              @click="showEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" @click="delRelation(scope.$index, scope.row)" type="danger">取消关联</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize"
        :select-data-len="multipleSelection.length" @pagination="getList()" />

      <!-- 新增关系弹窗 -->
      <el-dialog title="新建关系" :visible.sync="newFormVisible">
        <el-form :model="new_form" label-width="100px" :rules="rules" ref="new_form">
          <el-form-item label="源模型" prop="sourceModelId">
            <el-select v-model="new_form.sourceModelId" filterable placeholder="请选择源模型">
              <el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId">
              </el-option>
            </el-select>
            <!-- <el-input v-model="new_form.sourceModelId" disabled></el-input> -->
          </el-form-item>
          <el-form-item label="目标模型" prop="destModelId">
            <el-select v-model="new_form.destModelId" filterable placeholder="请选择目标模型">
              <el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联类型" prop="modelAssociationTypeId">
            <el-select v-model="new_form.modelAssociationTypeId" filterable placeholder="请选择关联类型">
              <el-option v-for="item in modelAssociationTypeoptions" :key="item.associationTypeUniqueIdentification"
                :label="item.name" :value="item.modelAssociationTypeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="new_form.remarks" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addRelation('new_form')">确 定</el-button>
          <el-button @click="newFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 编辑关系弹窗 -->
      <el-dialog title="编辑关系" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="100px" :rules="rules" ref="form">
          <!-- <el-form-item label="唯一编号">
            <el-input v-model="form.modelAssociationId" disabled></el-input>
          </el-form-item> -->
          <el-form-item label="源模型">
            <el-select v-model="form.sourceModelId" filterable>
              <el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目标模型" prop="destModelId">
            <el-select v-model="form.destModelId" filterable placeholder="请选择目标模型">
              <el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联类型" prop="modelAssociationTypeId">
            <el-select v-model="form.modelAssociationTypeId" filterable placeholder="请选择关联类型">
              <el-option v-for="item in modelAssociationTypeoptions" :key="item.associationTypeUniqueIdentification"
                :label="item.name" :value="item.modelAssociationTypeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remarks" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editRelation('form')">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getModelAssociationSearch_Api,
  getModelList_Api,
  getAssociationTypeList_Api,
  getAddModelAssociation_Api,
  getDelModelAssociation_Api,
  getEditModelAssociation_Api
} from "@/api/configuration/model"
export default {
  data() {
    return {
      dialogFormVisible: false, //编辑弹框隐藏显示
      //编辑弹框表单
      form: {
        modelAssociationId: "", //唯一编号
        sourceModelId: "", //源模型编号
        destModelId: "", //目标模型
        modelAssociationTypeId: "", //关联类型id
        remarks: null, //备注
      },
      newFormVisible: false, //新建关系弹框显示隐藏
      new_form: {
        sourceModelId: null, //源模型id
        destModelId: null, //目标模型id
        modelAssociationTypeId: null, //关联类型id
        remarks: "", //备注
      }, //新建关系表单
      loading: false,
      total: 20,
      //分页数据
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      multipleSelection: [],
      //请求列表数据
      tableData: [],
      //模型选择菜单
      options: [],
      //关联类型列表
      modelAssociationTypeoptions: [],
      rules: {
        sourceModelId: [
          { required: true, message: "请选择源模型", trigger: "blur" },
        ],
        destModelId: [
          { required: true, message: "请选择目标模型", trigger: "blur" },
        ],
        modelAssociationTypeId: [
          { required: true, message: "请选择关联类型", trigger: "blur" },
        ],
      },
    }
  },
  mounted() {
    this.getList();
    //获取不分组模型
    this.getModels();
    //获取关联类型
    this.getAssociationTypeList();
  },
  methods: {
    //获取关联类型数据
    async getAssociationTypeList() {
      let res = await getAssociationTypeList_Api();
      let { code, rows } = res;
      if (code == 200) {
        this.modelAssociationTypeoptions = rows;
      }
    },
    //获取所有模型数据
    async getModels() {
      let res = await getModelList_Api();
      let { code, data } = res;
      if (code == 200) {
        this.options = data;
      }
    },
    async getList() {
      this.loading = true;
      let res = await getModelAssociationSearch_Api(this.query);
      let { total, rows, code } = res;
      if (code == 200) {
        this.total = total;
        this.tableData = rows;
        this.loading = false;
      }
    },
    //删除联系

    delRelation(index, row) {
      this.$confirm('此操作将永久取消改关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await getDelModelAssociation_Api(row.modelAssociationId)
        let { code, msg } = res
        if (code == 200) {
          this.$message.success(msg)
          this.getList()
        }
        else {
          this.$message.error(msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //展示新增关系
    showAdd() {
      this.newFormVisible = true
      this.new_form = {
        sourceModelId: null, //源模型id
        destModelId: null, //目标模型id
        modelAssociationTypeId: null, //关联类型id
        remarks: "", //备注 //新建关系表单
      };
    },
    //新建关联
    addRelation(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddModelAssociation_Api(this.new_form);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getList();
            this.newFormVisible = false;
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //显示编辑关联
    showEdit(index, row) {
      this.dialogFormVisible = true
      this.form = row
    },    //编辑关系
    editRelation(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getEditModelAssociation_Api(this.form);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getList();
            this.dialogFormVisible = false;
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },


}
</script>

<style lang="scss" scoped></style>